<template>
    <div>
    
    
    
    
    
    
    
        <div>111Aaaaa</div>
    
    
    
        <div style="font-size: 30px">wuwuwuuw啊啊啊啊啊啊</div>
    
    
    
        <h1>{{ message }}</h1>
    
    
    
        <button @click="destroyComponent">Destroy Component</button>
    
    
    
        <select name="" id="">
    
        
    
            
    
        
    
                        <option value="1">111</option>
    
        
    
            
    
        
    
                        <option value="2">222</option>
    
        
    
            
    
        
    
                        <option value="3">333</option>
    
        
    
            
    
        
    
                    </select>
    
    
    
        <div>
    
    
    
            <div class="test1">
    
    
    
                <span class="test2">11111</span>
    
    
    
            </div>
    
    
    
            <div id="demo">
    
    
    
                <button v-on:click="show = !show">
    
        
    
                              Toggle
    
        
    
                            </button>
    
    
    
                <button @click="add"> +</button>
    
    
    
                <button @click="reduce"> -</button>
    
    
    
                <!-- <transition name="fade">
    
        
    
                              <p v-if="show">hello===hello===hello</p>
    
        
    
                            </transition> -->
    
    
    
    
    
    
    
                <li v-once v-for="item in items" :key="item.id">
    
    
    
                    {{ item.text }}
    
    
    
                </li>
    
    
    
            </div>
    
    
    
            <div>
    
    
    
                <Page :current="1" :total="100"></Page>
    
    
    
            </div>
    
    
    
        </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </div>
</template>
<script>
export default {
    name: 'aCompontent',
    data() {
        return {
            count: 0,
            show: true,
            items: [{
                id: 0,
                text: 11
            }],
            message: "Hello, world!",
            intervalId: null
        }
    },
    props: ["a3"],
    created() {
        // console.log('query=>',this.$route.query)
        // console.log('params=>',this.$route.params)
        this.intervalId = setInterval(() => {
            console.log("Interval tick");
        }, 1000);
    },

    beforeUpdate() {
        console.log('beforeUpdate=>beforeUpdate')
    },
    updated() {
        console.log('updated=>updated')
    },
    // mounted(){
    //     console.log('mounted: PageA')
    // },
    // activated() {
    //     console.log('activated: PageA')
    // },
    // deactivated() {
    //     console.log('deactivated: PageA')
    // },

    beforeDestroy() {
        console.log("beforeDestroy: cleaning up");
        clearInterval(this.intervalId);
    },
    destroyed() {
        console.log("destroyed:::::destroyed");
    },
    beforeRouteUpdate(to, from, next) {
        console.log("beforeRouteUpdate: cleaning up");
        this.message = "";
        next();
    },
    methods: {
        destroyComponent() {
            clearInterval(this.intervalId);
            this.$destroy();
        },
        startUpFoo() {
            this.$emit("upFoo", "foooooooooooo");
        },
        add() {
            this.items.push({
                id: this.items[0].id++,
                text: this.items[0].text++
            })
            this.$set(this.items)
            console.log('this.items', this.items);
        },
        reduce() {
            this.items.pop()
            console.log('this.items', this.items);
        },
    }
}
</script>
<style lang="scss">
.test1 {
    .test2 {
        background-color: $color-theme;
    }
}
</style>